<template>
  <el-table v-loading="loading" :height="tableHeigth" :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
    <el-table-column prop="createId" show-overflow-tooltip label="创建者" min-width="120" align="center" />
    <el-table-column prop="hazardLevel" show-overflow-tooltip label="异常等级" min-width="120" align="center">
      <template #default="scope">
        {{
          scope.row && scope.row.hazardLevel && scope.row.hazardLevel === '1' ? '致命 A' : scope.row.hazardLevel === '2' ? '严重 B' : scope.row.hazardLevel === '3' ? '一般 C' : '轻微 D'
        }}
      </template>
    </el-table-column>
    <el-table-column prop="description" show-overflow-tooltip label="描述" min-width="200" align="center" />
    <el-table-column prop="causeAnalysis" show-overflow-tooltip label="原因分析" min-width="200" align="center" />
    <el-table-column prop="treatment" show-overflow-tooltip label="处理说明" min-width="120" align="center" />
    <el-table-column prop="status" show-overflow-tooltip label="处理状态" min-width="200" align="center">
      <template #default="scope">
        {{
          scope.row && scope.row.status && scope.row.status === '0' ? '待激活' : scope.row.status === '1' ? '待处理' :
          scope.row.status === '2' ? '已完成' : '已终止'
        }}
      </template>
    </el-table-column>
    <el-table-column prop="createTime" show-overflow-tooltip label="创建时间" min-width="200" align="center">
      <template #default="scope">
        {{ moment(scope.row.createTime).format("YYYY-MM-DD HH:mm") }}
      </template>
    </el-table-column>
    <el-table-column show-overflow-tooltip label="操作" min-width="400" align="center">
      <template #default="scope">
        <el-button type="primary" @click="abnormalLookbtn(scope.row)">详情</el-button>
        <el-button type="danger" @click="delAbnormalBtn(scope.row)">删除</el-button>
        <el-button type="success" @click="assignBtn(scope.row, 1)" :disabled="(scope.row.status==='2' || scope.row.status==='3')">指派</el-button>
        <el-button type="primary" @click="finishBtn(scope.row, 2)" :disabled="(scope.row.status==='2' || scope.row.status==='3')">完成</el-button>
        <el-button type="danger" @click="stopBtn(scope.row, 3)" :disabled="(scope.row.status==='2' || scope.row.status==='3')">终止</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang='ts'>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import moment from 'moment'
import useInstance from '@/hooks/useInstance';
const {global} =useInstance()
const props = defineProps({
  tableHeigth: {
    type: Number,
    default: 0
  },
  tableData: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['abnormalLookbtn', 'delAbnormalBtn', 'assignBtn', 'finishBtn', 'stopBtn'])
const abnormalLookbtn = (row?) => {
  emit('abnormalLookbtn', row)
}
const delAbnormalBtn = (row?) => {
  emit('delAbnormalBtn', row)
}
const assignBtn = (row, action) => {
  // 做一个小判断 在什么情况下就不能指派了 
  if (row.status === '2') {
    global.$message({type:'warning',message:'已完成不能再指派'})
    return
  } else if (row.status === '3') {
    global.$message({type:'warning',message:'已终止不能再指派'})
    return
  } else {
    emit('assignBtn', row, action)
  }
}
const tableRowClassName = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 1) {
      return "warning-row";
    } else {
      return "success-row";
    }
  }
const finishBtn = (row, action) => {
  if (row.status === '2') {
    global.$message({type:'warning',message:'已完成不能再操作'})
    return
  } else if (row.status === '3') {
    global.$message({type:'warning',message:'已终止不能再操作'})
    return
  } else {
    emit('finishBtn',row,action)
  }
}
const stopBtn = (row, action) => {
    if (row.status === '2') {
    global.$message({type:'warning',message:'已完成不能再操作'})
    return
  } else if (row.status === '3') {
    global.$message({type:'warning',message:'已终止不能再操作'})
    return
  } else {
    emit('stopBtn',row,action)
  }
}
</script>
<style scoped lang='scss'></style>